<template>
  <div :class="`title ${allowMove ? 'move' : ''}`" @mousedown.stop="startDrag" @touchstart.prevent.stop="startDrag">
    <div class="time_title">
      <span>{{ title }}</span>
      <slot></slot>
    </div>
    <div class="time_close" @click.prevent="close" @touchstart.prevent="close" @mousedown.stop @touchstart.prevent.stop>
      <img :src="closeIcon" />
    </div>
  </div>
</template>

<script>
import closeIcon from '../../../assets/teaching/closeNew.png';

export default {
  props: {
    title: {
      type: String,
      required: true,
    },
    // 是否允许拖动
    allowMove: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      closeIcon,
      _isMouseDown: false, // 用于跟踪鼠标是否按下
      startX: 0,
      startY: 0,
    };
  },
  mounted() {
    this.left = 0;
    this.top = 0;
    this.centerContent();
  },
  methods: {
    close() {
      this.$emit('close');
    },
    centerContent() {
      const derOnlyOneContainer = document.querySelector('.derOnlyOneContainer');
      const mentContainerBottom = document.querySelector('#ment-container');
      const { h, w } = this.getInner();
      // 获取父组件的高度 计算让父组件居中
      if (derOnlyOneContainer) {
        const parentW = mentContainerBottom.offsetWidth;
        const height = derOnlyOneContainer.offsetHeight;
        // 自身宽度
        const width = derOnlyOneContainer.offsetWidth;
        const rect = derOnlyOneContainer.getBoundingClientRect();
        // this.top = -(h - height) / 4;
        if (parentW < width) {
          // 负数
          this.left = -(width - parentW) / 2;
        } else {
          // 正数
          this.left = (parentW - width) / 2;
        }
        // 把位置信息传递给父元素
        this.$emit('getPosition', { x: this.left, y: this.top });
      }
    },
    startDrag(e) {
      e.stopImmediatePropagation();
      if (e.type === 'mousedown') {
        this.startX = e.clientX;
        this.startY = e.clientY;
      } else if (e.type === 'touchstart') {
        const touch = e.touches[0];
        this.startX = touch.clientX;
        this.startY = touch.clientY;
      }

      this._isMouseDown = true;

      const onMove = (e) => {
        if (!this._isMouseDown) return;

        let clientX, clientY;
        if (e.type === 'mousemove') {
          clientX = e.clientX;
          clientY = e.clientY;
        } else if (e.type === 'touchmove') {
          const touch = e.touches[0];
          clientX = touch.clientX;
          clientY = touch.clientY;
        }

        const deltaX = clientX - this.startX;
        const deltaY = clientY - this.startY;

        const { w, h } = this.getInner();
        const mentToolsElements = document.getElementsByClassName('ment-tools');

        if (mentToolsElements.length > 0) {
          const element = mentToolsElements[0];
          const bW = element.offsetWidth;
          const bH = element.offsetHeight;
          const rect = element.getBoundingClientRect();
          const x = rect.left;
          const y = rect.top;

          const leftBorderR = w - x - bW;
          const leftBorderL = Math.abs(w - x - bW);
          const topBorderT = y;
          const topBorderB = Math.abs(h - y - bH);

          if (this.left + deltaX < -leftBorderL) {
            this.left = -leftBorderL;
          } else if (this.left + deltaX >= leftBorderR) {
            this.left = leftBorderR;
          } else {
            this.left += deltaX;
          }

          if (this.top + deltaY < -topBorderT) {
            this.top = -topBorderT;
          } else if (this.top + deltaY >= topBorderB) {
            this.top = topBorderB;
          } else {
            this.top += deltaY;
          }

          // 把位置信息传递给父元素
          this.$emit('getPosition', { x: this.left, y: this.top });
        }

        this.startX = clientX;
        this.startY = clientY;
      };

      const onUp = () => {
        document.removeEventListener('mousemove', onMove);
        document.removeEventListener('mouseup', onUp);
        document.removeEventListener('touchmove', onMove);
        document.removeEventListener('touchend', onUp);
        this._isMouseDown = false;
      };

      document.addEventListener('mousemove', onMove);
      document.addEventListener('mouseup', onUp);
      document.addEventListener('touchmove', onMove);
      document.addEventListener('touchend', onUp);
    },
    getInner() {
      return {
        w: document.documentElement.clientWidth,
        h: document.documentElement.clientHeight,
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.move {
  cursor: move;
}

.title {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  box-shadow: 0px 0px 124px 0px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  z-index: 1000;
  position: relative;
  user-select: none;

  .time_title {
    font-size: 18px;
    font-weight: bold;
    font-family: PingFangSC, PingFang SC;
    color: #281506;
    flex: 1;
    display: flex;
    align-items: center;
  }

  .time_close {
    cursor: pointer;
    width: 25px;
    height: 25px;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 36px;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: 10px;
      height: 10px;
    }
  }
}
</style>
